<script setup>
import { ref } from 'vue'
import { userLoginService } from '@/api/user'
import { cartGetInfo } from '@/api/cart'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

const formModel = ref({
  username: '',
  password: '',
  phone: '',
  code: ''
})

const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 1, max: 10, message: '用户名必须是 5-10位的字符', trigger: 'blur' }
  ],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}

const loginType = ref('password') // 'password' or 'sms'

const toggleLoginType = (type) => {
  loginType.value = type
}

const cartItems = ref([])
const getCart = async () => {
  const res = await cartGetInfo()
  cartItems.value = res.data
  // console.log(cartItems.value.length)
  userStore.setNum(cartItems.value.length)
}

const submitForm = async () => {
  // console.log(formModel.value.username)
  const res = await userLoginService(formModel.value.username, formModel.value.password)
  userStore.setToken(res.data.token)
  userStore.setUser(res.data)
  ElMessage({
    message: '登录成功',
    type: 'success'
  })
  await getCart()
  router.push('/')
}

const main = () => {
  router.push('/')
}
</script>

<template>
  <div class="head-container">
    <div class="logo-search-nav">
      <div class="logo">
        <img src="@/assets/logo.png" alt="logo" class="logo-img" @click="main" />
      </div>
    </div>
  </div>

  <div class="container">
    <div class="login-container">
      <div class="login-box">
        <div class="login-options">
          <div class="password-login" :class="{ active: loginType === 'password' }" @click="toggleLoginType('password')">密码登录</div>
          <div class="sms-login" :class="{ active: loginType === 'sms' }" @click="toggleLoginType('sms')">短信登录</div>
          <div class="qr-title">手机扫码安全登录</div>
        </div>
        <div class="login-content">
          <el-form :model="formModel" :rules="rules" class="login-form">
            <template v-if="loginType === 'password'">
              <el-form-item prop="username">
                <el-input v-model="formModel.username" type="text" placeholder="账号名/邮箱/手机号" class="input-field"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="formModel.password" type="password" placeholder="请输入登录密码" class="input-field"></el-input>
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item prop="phone">
                <el-input v-model="formModel.phone" type="text" placeholder="请输入手机号" class="input-field"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input v-model="formModel.code" type="text" placeholder="请输入验证码" class="input-field">
                  <template #append>
                    <el-button>获取验证码</el-button>
                  </template>
                </el-input>
              </el-form-item>
            </template>
            <el-form-item>
              <el-button class="button" type="primary" @click="submitForm">登录</el-button>
            </el-form-item>
          </el-form>
          <div class="qr-login">
            <div class="qr-code">
              <img src="@/assets/qrcode.jpg" alt="QR Code" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.head-container {
  padding: 20px 95px;
}

.container {
  padding: 80px 95px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-search-nav {
  display: flex;
  align-items: center;
  padding: 5px 0;
  background-color: #e8e6e2;
}

.logo {
  margin-right: 80px;
  margin-left: 60px;
}

.logo-img {
  height: 70px;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.login-box {
  background: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 700px;
  display: flex;
  flex-direction: column;
}

.login-options {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
  border-bottom: 1px solid #eee;
}

.password-login,
.sms-login {
  cursor: pointer;
  padding: 10px 20px;
  border-bottom: 2px solid transparent;
  margin-left: 30px;
}

.password-login.active,
.sms-login.active {
  border-bottom: 2px solid #ff6600;
  color: #ff6600;
}

.login-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.login-form {
  width: 50%;
}

.input-field {
  width: 330px;
  height: 50px;
  margin-bottom: 10px;
}

.register-links {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.register-links a {
  color: #1a1a1a;
  text-decoration: none;
}

.qr-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  text-align: center;
}

.qr-title {
  margin-left: 185px;
  margin-top: 10px;
  font-size: 18px;
  color: #333;
}

.qr-code img {
  width: 200px;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
}
.button {
  width: 250px;
  height: 45px;
  margin-left: 40px;
  margin-top: 20px;
}
</style>
